import React, { useState ,useEffect} from 'react'
import "./App.css"

import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export const App1Context = React.createContext();
export default function App() {
  //状态提升,把数据放在App中
  //初始化todoList数据
  const [todoList, setTodoList] = useState([])
  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
  },[])

  useEffect(() => {
    localStorage.setItem('todoList',JSON.stringify(todoList))
  },todoList)

  return (
    <div className="todo-container">
      <div className="todo-wrap">
      <App1Context.Provider value={{todoList,setTodoList}} >
        <Header />
        <List />
        <Footer />
        </App1Context.Provider>
      </div>
    </div>
  )
}
